<template>
  <div>
    <!-- <maptx id="map1" ref="map1" :lat="27.679932" :lng="114.851456" :zoom="11" :dark="true" :callback="true" @callback="createdate"></maptx> -->

    <maptx id="map2" ref="map2" type="tencent" :zoom="10" :pitch="30" :dark="true"></maptx>
    <div class="btnGrp">
      <h3>辅助控件</h3>
      <p>
        <button v-on:click="btnHide">隐藏控件</button>
        <button v-on:click="btnShow">显示控件</button><br />
        <input type="text" ref="zoomid" value="10" style="width:30px"><button v-on:click="updateZoom">调整缩放等级</button>
      </p>
      <h3>底图</h3>
      <p>
        <button v-on:click="btnMapVector">矢量地图</button>
        <button v-on:click="btnMapSat">卫星地图</button>
        <button v-on:click="setDark(false)">白色</button>
        <button v-on:click="setDark(true)">黑色</button>
        <button v-on:click="btn3d()">3D</button>
      </p>
      <h3>轮廓</h3>
      <p>
        <button v-on:click="btnHighLight">全市遮罩高光</button>
        <button v-on:click="btnHighLight2">区域线条</button>
      </p>

      <h3>区域覆盖</h3>
      <p>
        <button v-on:click="showAreaColor">区域范围色块</button>
      </p>
      <h3>标记</h3>
      <p>
        <button v-on:click="showAreaLabel">显示区域名称</button>
        <button v-on:click="addMarkerCluster">增加标记（聚合）</button>
        <button v-on:click="addMarker">增加标记（不聚合）</button>
      </p>
      <h3>图像覆盖物</h3>
      <p>
        <button v-on:click="addLine">折线</button>
        <button v-on:click="addSharp">多边形</button>
        <button v-on:click="addDialog">小窗口</button>

      </p>
      <h3>可视化</h3>
      <p>
        <button v-on:click="addTrace">增加行动轨迹</button>
      </p>
      <h3>拾取</h3>
      <p>
        <button v-on:click="showDraw">绘制多边形</button>
      </p>
    </div>
  </div>
</template>
 
 
 
<script>

  import maptx from '@/views/visualization/map/MapTencent.vue'

  export default {
    components: { maptx },
    mounted() {
      this.$refs.map2.showAreaColor();
      this.$refs.map2.showAreaLabel();
    },
    methods: {
      btnHide() {
        this.$refs.map2.hideControl("zoom")
        this.$refs.map2.hideControl("scale")
        this.$refs.map2.hideControl("rotation")
      },
      btnShow() {
        this.$refs.map2.showControl("zoom")
        this.$refs.map2.showControl("scale")
        this.$refs.map2.showControl("rotation")
      },
      setDark(isdark) {
        this.$refs.map2.setDark(isdark);
      },
      updateZoom() {
        this.$refs.map2.setZoom(this.$refs.zoomid.value);
      },
      btnMapVector() {
        this.$refs.map2.setBaseMap({ type: 'vector', features: ['base', 'building2d'] });
      },
      btnMapSat() {
        this.$refs.map2.setBaseMap({ type: 'satellite' });
      },
      btn3d(){
        let map=this.$refs.map2.getMap();
        this.$refs.map2.setCenter(28.647418, 115.939368);
        map.setBaseMap({type: 'vector',	features: ['base', 'building2d', 'building3d']});
        map.setRotation(30);
        map.setPitch(60);
        map.setZoom(18);
      },
      btnHighLight() {
        this.$refs.map2.showBound({ adid: '360100' });
      },
      btnHighLight2() {
        this.$refs.map2.showBound({ adid: 'all', width: 2, highlight: false });
      },
      getMap() {
        let map = this.$refs.map2.getMap();
        console.log(map)
      },
      createdate(map) { // callback
        console.log("createdate111")
        console.log(map)
      },
      showAreaColor() {
        this.$refs.map2.showAreaColor();
      },
      showAreaLabel() {
        this.$refs.map2.showAreaLabel();
      },
      addMarkerCluster() {
        this.$refs.map2.addMarkerCluster();
      },
      addMarker() {
        this.$refs.map2.addMarker();
      },
      addTrace() {
        this.$refs.map2.setZoom(13);
        this.$refs.map2.setCenter(28.64278, 115.916861);
        this.$refs.map2.addTrace();
      },
      addLine() {
        this.$refs.map2.setZoom(13);
        this.$refs.map2.setCenter(28.64278, 115.916861);
        this.$refs.map2.addLine();
      },
      addSharp() {
        this.$refs.map2.setZoom(13);
        this.$refs.map2.setCenter(28.64278, 115.916861);
        this.$refs.map2.addSharp();
      },
      addDialog() {
        this.$refs.map2.setZoom(13);
        this.$refs.map2.setCenter(28.64278, 115.916861);
        this.$refs.map2.addDialog();
      },
      showDraw(){
        this.$refs.map2.showDraw();
      }
    }
  }

</script>
<style scoped>
  #map1 {
    width: 100px;
    height: 100px;
  }
  #map2 {
    width: 1000px;
    height: 800px;
  }
  .btnGrp {
    position: absolute;
    left: 1080px;
    top: 0px;
    width: 200px;
  }
</style>

<!--
//https://lbs.qq.com/webDemoCenter/visualizationApi/visualizationrArea/areaEvent 区域分色

-->